<template>
  <div class="login">
    <!-- el-row24分栏 ,  一行平均分成24份, offset 是向右的偏移量, span是占有的分数 -->
    <el-row>
      <el-col :span="8" :offset="8" >
        <div class="grid-content" >
          <h1>小优商城后台管理系统</h1>
          <!-- model: 表单的数据 -->
          <!-- rules: 校验的规则 -->
          <!-- label-width: 文本的宽度 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="username">
              <el-input v-model="ruleForm.username">
                  <el-button slot="prepend" icon="el-icon-user"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password">
                  <el-button slot="prepend" icon="el-icon-lock"></el-button>
              </el-input>
            </el-form-item>
            
            
            <el-form-item class="btn">
              <el-button class="btn1" type="danger" @click="submitForm('ruleForm')"
                >立即登陆</el-button
              >
              <!-- <el-button type="primary" @click="adduser"
                >添加管理员</el-button
              > -->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qs from 'qs'


export default {
  data() {
    return {
        // 表单的数据
      ruleForm: {
        username: "",
        password: "",
      },
    //  校验的规则
      rules: {
        username: [
          { required: true, message: "账号必须有!", trigger: "blur" },
        //   required 必填选项   trigger 校验的方式  blur 失去焦点的时候
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码必须有!", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
        // this.$refs 选择表单元素
        // validate 自带的检验函数
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 校验成功,   准备发请求
            // console.log(this.ruleForm.username);
         this.$store.dispatch('ac_login',this.ruleForm);
         
        } else {
          console.log(this);
          return false;
        }
      });
    },
    // 添加管理员
    adduser(){
      console.log('添加管理员');
      let obj = { roleid:3,username:'zhang',password:'123',status:'1'};
      this.http.post('/useradd',obj)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
    }



  },
};
</script>

<style>
.login {
  width: 100vw;
  height: 100vh;
  background: url("../assets/cts-loginbg.jpeg");
}
.login .grid-content {
  margin-top: 200px;
  padding: 0 40px;
  height: 300px;
  width: 350px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 10px #000;
  overflow: hidden;

}
.grid-content h1{
    margin:30px 20px;
    text-align: center;
    white-space: nowrap;
    color: #FF6263;
}

.grid-content .btn div{
  width: 100%;
}
.grid-content .btn div .btn1{
  width: 100%;
}

</style>